<template>
	<van-nav-bar fixed title="商品列表" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
	<div style="height: 45px;"></div>
	<!-- 上拉加载 下拉刷新 -->
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh" immediate-check="false" loosing-text="加载成功"
		animation-duration="500" success-text="刷新成功" success-duration="300">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<!-- 商品列表渲染 --> <!-- 商品列表渲染 -->
			<div v-for="item in goodsData" :key="item">
				<!-- 可以写成 -->
				<!-- <router-link :to="`/detail/` + item.goods_id"></router-link> -->
				<router-link :to="`/detail/${item.goods_id}`">
					<van-card :price="item.goods_price" :title="item.goods_name"
						:thumb="item.goods_big_logo ? item.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
				</router-link>
			</div>
		</van-list>
	</van-pull-refresh>
</template>
<script setup>
// 引入节流方法
// import throttle from 'lodash/throttle'
import { ref } from 'vue';
// 引入接口
import { goodsApi } from '@/api/api'
// 自定义商品列表数据
let goodsData = ref([])
goodsApi().then(res => {
	console.log('商品列表数据', res)
	goodsData.value = res.data.message.goods
})
// 自定义分页数据
let fetchData = ref([])
// 自定义当前页
let page = ref(2)
// 自定义一页的数据
let pageSize = ref(7)
// 发送请求拿数据
function goods() {
	goodsApi().then(res => {
		console.log('商品列表数据', res)
		let startIndex = (page.value - 1) * pageSize.value
		let endIndex = startIndex + pageSize.value
		goodsData.value = res.data.message.goods
		fetchData.value = goodsData.value
		fetchData.value = fetchData.value.slice(startIndex, endIndex)
	})
}
goods()
// 是否正在加载
let loading = ref(false)
// 是否加载完成
let finished = ref(false)
// 是否正在刷新
let refreshing = ref(false)
// 下拉刷新
const onRefresh = () => {
	page.value = 1
	finished.value = false
	refreshing.value = false
	goods()
}
// 上拉加载
// async 定义异步函数
const onLoad = async () => {
	// 如果已经加载完成则不执行任何操作
	if (finished.value) return
	// 当前页++
	page.value++
	// await暂停代码执行  goodsApi 接口请求完成，获取到 res 数据后，再执行后续的数据处理代码
	let res = await goodsApi()
	let startIndex = (page.value - 1) * pageSize.value
	let endIndex = startIndex + pageSize.value
	// 截取第二页的数据
	let newData = res.data.message.goods.slice(startIndex, endIndex)
	// 将第一页的数据和第二页的数据合并
	fetchData.value = [...fetchData.value, ...newData]
	// 如果渲染数据大于等于20条
	// 是否正在加载
	loading.value = false
	if (fetchData.value.length >= 20) {
		// 则加载完成
		finished.value = true
	}
}
</script>
<style lang="scss" scoped></style>